<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>drop demo</title>
<meta name="decorator" content="default" />
<link rel="stylesheet" href="${ctxStatic}/jquery-ui-1.11.4/jquery-ui.theme.css">
<script src="${ctxStatic}/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
	$(function() {    	
    	$( "#catalog li" ).draggable({
    		appendTo: "body",
    		helper: "clone"
    	});
    	
    	$( "#cart ol" ).droppable({
    		activeClass: "ui-state-default",
    		hoverClass: "ui-state-hover",
    		accept: ":not(.ui-sortable-helper)",
    		drop: function( event, ui ) {
    			$( this ).find( ".placeholder" ).remove();
    			var test = $( "<li></li>" ).text( ui.draggable.text() );
    			test.appendTo( this );
    			test.draggable({
    	    		 stop: function( event, ui ) {
    	    			 console.log(ui["helper"][0]);
    	    			 ui["helper"][0].remove();
    	    		 }
    	    	});
    		}
    	}).sortable({
    		items: "li:not(.placeholder)",
    		sort: function() {
    			$( this ).removeClass( "ui-state-default" );
    		}
    	});
    	
    	$("#btnGetData").click(function( event ) {
            event.preventDefault();
            console.log($( "#cart li" ));
        });
	});
</script>
</head>
<body>

<div id="products">
    <h1>Products</h1>
    <div id="catalog">
        <div class="ui-widget-content">
            <ul class="inline">
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
            </ul>
        </div>
    </div>
</div>

<div id="cart">
    <h1 >Shopping Cart</h1>
    <div class="ui-widget-content">
    <ol>
        <li class="placeholder">请添加数据</li>
    </ol>
</div>

<button id="btnGetData" class="btn btn-primary"> a </button>

</body>
</html>